<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/layer.js}"></script>
</head>
<div th:replace="client/header::header(${goods.title},null)"></div>
<body>
<article class="main-content post-page">
    <div class="post-header">
        <h1 class="post-title" itemprop="name headline" th:text="${goods.title}"></h1>
        <div class="post-data">
            <goods class="am-g blog-entry-article">
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                    <img width="50%" class="am-u-sm-12" th:src="@{${goods.image}}"/>
                </div>
                <div class="am-u-lg-3 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <h2>
                        <div><a style="color: #0f9ae0;font-size: 20px;" th:href="${commons.permalink(goods.id)}" th:text="${goods.title}" />
                        </div>
                    </h2>
                    <!-- 摘要-->
                    <div style="font-size: 16px;" th:utext="${commons.intro(goods,75)}" />
                    <p>¥<span class="info-text" th:text="${goods.price}"></span></p>
                    <button type="button" class="btn btn-primary" th:onclick="addGoodsToCart([[${goods.id}]])">加入购物车</button>
                    <a type="button" class="btn btn-warning" th:href="@{/order/toBuy(goodsId=${goods.id})}">
                        立即购买
                    </a>

                </div>

            </goods>
        </div>
    </div>
    <br />
    <div id="post-content" class="post-content content" th:utext="${commons.goods(goods.introduce)}"></div>
</article>
<div th:replace="client/footer::footer"></div>

<!-- 使用layer.js实现图片缩放功能 -->
<script type="text/JavaScript">
    $('.post-content img').on('click', function(){
        var imgurl=$(this).attr('src');
        var w=this.width*2;
        var h=this.height*2+50;
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            area: [w+"px", h+"px"],
            shadeClose: true, //点击遮罩关闭
            content: '\<\div style="padding:20px;">' +
                    '\<\img style="width:'+(w-50)+'px;" src='+imgurl+'\>\<\/div>'
        });
    });
    function addGoodsToCart(goodsId){
        console.log("goodsId"+goodsId);
        $.ajax({
            url:'/goods/addCart',
            type: 'post',
            dataType:'text',
            data:{goodsId:goodsId},
            success:function (result){
                toastr.success("加入购物车成功")
            },
            error:function (){
                toastr.error("加入购物车失败")
            }
        })
    }
</script>
</body>
</html>